<section id="contacts">
  <%= render partial: 'toolbar/profile', locals: { :subject => profile_or_current_subject } %>

  <div class="contacts tabbable">
    <ul class="nav nav-tabs">
      <% profile_or_current_subject.class.contact_index_models.each do |type| %>
        <li class="<%= 'active' if current_contact_section?(type) %>">
          <a data-toggle="tab" href="#<%= type %>" data-path="<%= contacts_path %>"<%= raw ' data-loaded="true"' if current_contact_section?(type) %>><%= t "#{ type }.title", count: :other %></a>
        </li>
      <% end %>
    </ul>

    <div class="tab-content">

      <div id="contacts-loading">
        <%= render partial: 'layouts/loading' %>
      </div>
    
      <% profile_or_current_subject.class.contact_index_models.each do |type| %>
        <div id="<%= type %>" class="tab-pane <%= 'active' if current_contact_section?(type) %>">
          <%= text_field_tag "contact-filter-#{ type }", (current_contact_section?(type) ? params[:q] : ""), class: "pull-right contact-filter", placeholder: "filter", autocomplete: "off" %>

          <% if user_signed_in? && type == :group %>
            <%= link_to t('group.new.link'), new_group_path, class: 'new_group-modal-link', 'data-toggle' => 'modal' %>

            <%= render partial: 'groups/new_modal',
                       locals: { resource_class: Group } %>
          <% end %>

          <div class="contact-list">
            <% if current_contact_section?(type) %>
              <% if @contacts.any? %>
                <%= render current_subject_contacts_to(@contacts) %>
              <% else %>
                <%= raw t("contact.empty", explore: explore_path) %>
              <% end %>
            <% else %>
              <%= render partial: 'layouts/loading' %>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </div>

  <%= javascript_tag do %>
    $(function() {
      SocialStream.Contact.index();
    });
  <% end %>
</section>
